<template>
    <div class="blog-box">
        <div class="blog-header">
            <div class="blog-header-left">
                <div class="blog-title">
                    个人博客
                </div>
                <ul class="blog-classify">
                    <li>web</li>
                    <li>android</li>
                    <li>ios</li>
                    <li>java</li>
                    <li>python</li>
                    <li>.net</li>
                    <li>其他</li>
                </ul>
                <el-input v-model="searchText" style="width: 300px" size="large" placeholder="代码的力量"
                    :suffix-icon="Search" />
            </div>
            <div class="login-box"><span @click="login(1)">登录</span><span class="register" @click="login(2)">注册</span>
            </div>

        </div>
        <div class="blog-line"></div>
        <div class="blog-content">
            <div class="left-list">
                <div class="list-item" v-for="item in 8" :key="item">
                    <div class="blog-item-title">SpringMVC-01-回顾MVC架构</div>
                    <div class="blog-item-content">
                        <img src="@/assets/imgs/20240531095933.png" class="blog-item-avatar" alt="">
                        <div class="blog-item-info">1、什么是MVC MVC是模型(Model)、视图(View)、控制器(Controller)的简写，是一种软件架构模式。
                            它通过将业务逻辑、页面控制、显示视图分离的方法来组织代码。 主要作用是降低了视图与业务逻辑间的双向偶合。 它不是一种设计模式，而是一种架构模式。当然不同的MVC存在差异。 Mo ...
                        </div>
                    </div>
                    <div class="blog-author">
                        <span class="blog-author-name">程序员</span>
                        <span class="blog-time">2024-06-26 13:50</span>
                        <span class="blog-view" @click="giveUp">
                            <el-icon>
                                <Pointer :color="color" />
                            </el-icon>
                            <span class="view-num" :style="{ 'color': color }">{{ giveUpNumber }}</span>
                        </span>
                        <span class="blog-view">
                            <el-icon>
                                <View />
                            </el-icon>
                            <span class="view-num">1000</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="right-list">
                <div class="recommond-box">
                    <p class="recommond-title">48小时阅读排行</p>
                    <ul>
                        <li>1.免费且离线的同声翻译利器「GitHub 热点速览」</li>
                        <li>2.毕业季，终于毕业了！</li>
                        <li>3.vue3.4的更新，保证你看的明明白白</li>
                        <li>4.为什么不推荐使用Linq?</li>
                        <li>5.仓颉语言HelloWorld内测【仅需三步】</li>
                        <li>6.【译】Visual Studio 2022 - 17.10 性能增强</li>
                    </ul>
                </div>


                <div class="recommond-box advBox">

                </div>


                <div class="recommond-box">
                    <p class="recommond-title">10天推荐排行</p>
                    <ul>
                        <li>1.免费且离线的同声翻译利器「GitHub 热点速览」</li>
                        <li>2.毕业季，终于毕业了！</li>
                        <li>3.vue3.4的更新，保证你看的明明白白</li>
                        <li>4.为什么不推荐使用Linq?</li>
                        <li>5.仓颉语言HelloWorld内测【仅需三步】</li>
                        <li>6.【译】Visual Studio 2022 - 17.10 性能增强</li>
                    </ul>
                </div>

                <div class="recommond-box">
                    <p class="recommond-title">热门新闻</p>
                    <ul>
                        <li>1.免费且离线的同声翻译利器「GitHub 热点速览」</li>
                        <li>2.毕业季，终于毕业了！</li>
                        <li>3.vue3.4的更新，保证你看的明明白白</li>
                        <li>4.为什么不推荐使用Linq?</li>
                        <li>5.仓颉语言HelloWorld内测【仅需三步】</li>
                        <li>6.【译】Visual Studio 2022 - 17.10 性能增强</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="blog-bottom">
            <div>
                友情链接：
                链接一
                链接二
                链接三
                链接四
                链接五
                链接六
            </div>
            <div class="line"></div>
        </div>
    </div>
    <login-box :dialogVisible="dialogVisible" :loginType="loginType" @cancel="cancel" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
// import { useRouter } from 'vue-router';
import loginBox from './components/loginBox.vue';
// let router = useRouter()
let searchText = ref<string>('')
let color = ref<string>('#333')
let giveUpNumber = ref<number>(100)
let dialogVisible = ref<boolean>(false)
let loginType = ref<number>(1)
let login = (type: number) => {
    loginType.value = type
    dialogVisible.value = true
}
let cancel = () => {
    dialogVisible.value = false
}
let giveUp = () => {
    color.value = '#f40'
    giveUpNumber.value++
}

</script>

<style scoped lang="scss">
.blog-box{
    background: linear-gradient(130deg, #495f77, #6bbeb8);

}
.blog-header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
}

.blog-line {
    width: 100%;
    height: 30px;
    background: linear-gradient(130deg, #495f77, #6bbeb8);
}

.login-box {
    width: 200px;
    cursor: pointer;
    display: flex;

    .register {
        margin-left: 20px;
    }
}


.blog-title {
    font-size: 22px;
}

.blog-header-left {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 50px;
    flex: 1;
}

.login-box {
    font-size: 16px;
}

.blog-classify {
    display: flex;
    margin-left: 20%;
    font-size: 18px;
    cursor: pointer;
    margin-right: 15%;

    li {
        margin-right: 30px;
    }

    li:hover {
        color: #005dae;

    }
}

.blog-content {
    width: 80%;
    margin: 0 auto;
    min-height: calc(100vh - 90px);
    display: flex;

    .left-list {
        flex: 1;
        padding: 30px;
        height: auto;
        background-color: #fff;

        .list-item {
            width: 100%;
            height: 150px;
            border-bottom: 1px solid #efefef;
            padding: 20px 0 10px 0;
        }

        .blog-item-title {
            font-size: 16px;
            font-weight: 600;
            color: #005dae;
            cursor: pointer;
            text-decoration: underline;
        }

        .blog-item-title:hover {
            color: red;

        }

        .blog-item-content {
            margin: 15px 0;
            display: flex;
            justify-content: space-between;

            img {
                margin: 3px 5px 0 0;
            }
        }

        .blog-item-info {
            font-size: 12px;
            color: #555;
            line-height: 20px;
        }

        .blog-author {
            display: flex;
            font-size: 13px;

            span {
                margin-right: 20px;
            }
        }

        .blog-author-name {
            color: #005dae;
        }

        .blog-view {
            cursor: pointer;
            display: flex;
            align-items: center;
        }

    }

    .right-list {
        width: 350px;
        height: 100%;
        background-color: rgb(249, 249, 249);
        height: auto;
        padding: 40px 30px;
        font-size: 16px;

        .recommond-title {
            color: #666;
        }

        .recommond-box {
            margin-bottom: 30px;
        }

        ul {
            margin-top: 20px;

            li {
                font-size: 14px;
                line-height: 22px;
                width: 250px;
                margin-bottom: 5px;
                color: #333;
                cursor: pointer;
            }

            li:hover {
                color: #005dae;

            }
        }

        .advBox {
            width: 250px;
            height: 250px;
            background: linear-gradient(130deg, #495f77, #6bbeb8);

        }

        .view-num {
            margin-left: 10px;
            display: inline-block;
        }
    }
}

.blog-bottom {
    padding: 30px 300px;
    font-size: 14px;
    width: 100%;
    height: 200px;
    background-color: rgb(243, 243, 243);

    div {
        text-align: center;
    }

    .line {
        width: 100%;
        border-bottom: 1px solid #666;
        margin: 10px 0;
    }
}
</style>